<template>
  <a-card :bordered="false" style="height:800px">
    <a-row :gutter="24">
      <a-col span="6" class="tree-box">
        <a-tree :load-data="onLoadData" :tree-data="treeData" @select="handlerSelectNode" />
      </a-col>
      <a-col span="18">
        <h2>模型采集模板配置</h2>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <span slot="status" slot-scope="text, record">
            <a-switch :checked="Boolean(text)" @change="value => handlerSwitchChange(record.id, value)" />
          </span>
          <span slot="actionTitle">
            <a-button :disabled="!queryParam.modelId" type="primary" ghost @click="handlerAdd">新增</a-button>
          </span>
          <span slot="action" slot-scope="text, record">
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-col>
    </a-row>
    <CheckModel ref="CheckModel" @close="() => loadData()" />
  </a-card>
</template>

<script>
import { getAction, httpAction, deleteAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CheckModel from './components/Check'
export default {
  mixins: [JeecgListMixin],
  components: { CheckModel },
  data() {
    return {
      treeData: [],
      url: {
        list: '/sjmx2/dataModelCollect/list',
        tree: '/sjmx/queryDataModel',
        remove: '/sjmx2/dataModelCollect/remove',
        edit: '/sjmx2/dataModelCollect/edit'
      },
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '采集模板名称',
          align: 'center',
          dataIndex: 'collectNm'
        },
        {
          title: '采集模板状态',
          align: 'center',
          dataIndex: 'collectStatus_dictText'
        },
        {
          title: '采集模板版本号',
          align: 'center',
          dataIndex: 'collectVersion'
        },
        {
          title: '模板使用状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          slots: { title: 'actionTitle' }
        }
      ],
      queryParam: {
        modelId: ''
      },
      disableMixinCreated: true
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData(params) {
      getAction(this.url.tree, params)
        .then(res => {
          if (res.success) {
            this.treeData = res.result.map(item => {
              return {
                title: item.modelName,
                key: item.id
              }
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          throw new Error(err)
        })
    },
    onLoadData(treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve()
          return
        }
        getAction(this.url.tree, { id: treeNode.dataRef.key }).then(res => {
          if (res.success) {
            treeNode.dataRef.children = res.result.map(item => {
              return {
                title: item.modelName,
                key: item.id
              }
            })
            this.treeData = [...this.treeData]
            resolve()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    handlerSwitchChange(id, status) {
      console.log(+status)
      httpAction(this.url.edit, { id, status: +status }, 'PUT').then(res => {
        if (res.success) {
          this.loadData()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handlerAdd() {
      console.log('新增')
      this.$refs.CheckModel.Check(this.queryParam.modelId)
    },
    handlerSelectNode(selectedKeys) {
      this.queryParam.modelId = selectedKeys[0]
      this.loadData()
    },
    handleDelete(id) {
      deleteAction(this.url.remove, { id }).then(res => {
        if (res.success) {
          this.loadData()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
h2 {
  text-align: center;
  margin-bottom: 20px;
}
.tree-box {
  min-height: 350px;
  max-height: 750px;
  overflow: auto;
  border-right: 1px solid #e8e8e8;
}
</style>
